<!DOCTYPE html>
<html lang="en" xmlns:v="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-if="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Nogu OSU官网</title>
    <link rel="stylesheet" href="http://vits.natapp1.cc/static/layer/theme/default/layer.css">
    <link rel="stylesheet" href="http://vits.natapp1.cc/static/css/normalize.min.css">
    <link rel="stylesheet" href="http://vits.natapp1.cc/static/css/style.css">
    <link rel="stylesheet" href="http://vits.natapp1.cc/static/css/my.css">
    <link rel="stylesheet" href="../static/css/search/search.css">
    <link rel="stylesheet" type="text/css" href="http://vits.natapp1.cc/static/youka/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="http://vits.natapp1.cc/static/youka/css/player.css"/>
    <link rel="icon" href="https://osu.ppy.sh/favicon.ico"/>
</head>
<body>

<div id="app-container" class="app-container">

    <sidebar_model @set-user="setUser"></sidebar_model>

    <div class="app-content">
        <div class="app-content-header">
            <h1 class="app-content-headerText">OSU歌谱搜索</h1>
            <button class="mode-switch" title="Switch Theme">
                <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                     stroke-width="2" width="24" height="24" viewbox="0 0 24 24">
                    <defs></defs>
                    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
                </svg>
            </button>
        </div>
        <div class="app-content-actions">
            <input id="search" class="search-bar" placeholder="Search..." type="text" value="">
            <div class="app-content-actions-wrapper">
                <div class="filter-button-wrapper">
                    <button id="sx" class="action-button filter jsFilter"><span>筛选</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-filter">
                            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
                        </svg>
                    </button>
                    <div id="fm" class="filter-menu">
                        <label>模式</label>
                        <select id="md">
                            <option value="">所有</option>
                            <option value="0">Std</option>
                            <option value="1">Taiko</option>
                            <option value="3">Mania</option>
                            <option value="2">Ctb</option>
                        </select>
                        <label>常规</label>
                        <select id="cg" >
                            <option value="">官网默认</option>
                            <option value="featured_artists">精选艺术家</option>
                            <option value="follows">已关注谱师</option>
                            <option value="spotlights">聚光灯谱面</option>
                            <option value="converts">包括转谱</option>
                        </select>
                        <div class="filter-menu-buttons">
                            <button id="appSearch" onclick="appSearch();" class="filter-button apply">
                                搜索
                            </button>
                            <button onclick="sx();" class="filter-button reset">
                                关闭
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="osumapList" class="products-area-wrapper gridView">


        </div>

        <!-- 左侧播放器 开始-->
        <div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
            <div class="jp-type-playlist">
                <div id="jquery_jplayer_N" class="jp-jplayer">


                </div>
                <div class="jp-gui">
                    <div class="jp-video-play">
                        <button class="jp-video-play-icon" role="button" tabindex="0">播放</button>
                    </div>
                    <div class="jp-interface">
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-current-time" role="timer" aria-label="time"></div>
                        <div class="jp-duration" role="timer" aria-label="duration"></div>
                        <div class="jp-controls-holder">
                            <div class="jp-controls">
                                <button class="jp-previous" role="button" tabindex="0">上一曲</button>
                                <button class="jp-play" role="button" tabindex="0">播放</button>
                                <button class="jp-next" role="button" tabindex="0">下一曲</button>
                                <button class="jp-stop" role="button" tabindex="0">暂停</button>
                            </div>
                            <div class="jp-volume-controls">
                                <button class="jp-mute" role="button" tabindex="0">静音</button>
                                <button class="jp-volume-max" role="button" tabindex="0">最大音量</button>
                                <div class="jp-volume-bar">
                                    <div class="jp-volume-bar-value"></div>
                                </div>
                            </div>
                            <div class="jp-toggles">
                                <button class="jp-repeat" role="button" tabindex="0">重复</button>
                                <button class="jp-shuffle" role="button" tabindex="0">随机</button>
                                <!--<button class="jp-full-screen" role="button" tabindex="0">全屏</button>-->
                            </div>
                        </div>
                        <div class="jp-details">
                            <div class="jp-title" aria-label="title"></div>
                        </div>
                    </div>
                </div>
                <div class="jp-playlist">
                    <div class="jp-playlist-box">
                        <ul id="osu-box">
                            <li>
                                <div>
                                    <a href="javascript:;" class="jp-playlist-item-remove">下载</a>
                                    <a href="javascript:;" class="jp-playlist-item" tabindex="0">A.I. automatic infection <span class="jp-artist" style="transform: rotate(180deg);"> - capsule</span></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="jp-no-solution">
                    <span>正在加载歌曲中</span>
                    ，请耐心等待
                    <!--<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash插件</a>.-->
                </div>
            </div>
            <!--歌曲列表滚动条-->
            <div class="scrollBar">
                <div class="bar"></div>
            </div>
            <!--播放器展开隐藏按钮-->
            <button type="button" class="folded_bt" title="点击收缩" id="btnfold">
                <span></span>
            </button>
            <!--<div id="listRemove"></div>&lt;!&ndash;移除全部歌曲按钮&ndash;&gt;-->
            <div id="listClose"></div><!--歌曲列表展开收缩按钮-->
        </div>
        <!-- 左侧播放器 结束-->

        <div id="nextBtn">
            <input id="pci" type="hidden" value="">
            <input id="nci" type="hidden" value="">
            <button onclick="pSong();" class="pbtn" ><< Back</button>
            <button onclick="nSong();" class="nbtn">Next >></button>

        </div>

    </div>
</div>


<script src="http://vits.natapp1.cc/static/js/jquery.min.js"></script>
<script src="http://vits.natapp1.cc/static/js/vue.min.js"></script>
<script src="http://vits.natapp1.cc/static/js/axios.js"></script>
<script src="http://vits.natapp1.cc/static/layer/layer.js"></script>
<!--自己封装vue组件-->
<script src="http://vits.natapp1.cc/static/js/model.js"></script>
<!--原生js必须放到最后-->
<script src="http://vits.natapp1.cc/static/js/script.js"></script>
<script type="text/javascript" src="http://vits.natapp1.cc/static/youka/js/modernizr.js"></script>
<script type="text/javascript" src="http://vits.natapp1.cc/static/youka/js/jquery.js"></script>
<script type="text/javascript" src="http://vits.natapp1.cc/static/youka/js/index.js"></script>
<!--播放器js-->
<script type="text/javascript" src="http://vits.natapp1.cc/static/youka/js/player.js"></script>
<script type="text/javascript" src="http://vits.natapp1.cc/static/youka/js/playlist.js"></script>
<script type="text/javascript" src="http://vits.natapp1.cc/static/youka/js/player_database.js"></script>
<!--播放器js-->
<script>
    // 给导航栏设置active
    $(function () {
        $("#sidebar-list li").eq(1).addClass("active");
    });

</script>

<script>
    document.querySelector(".jsFilter").addEventListener("click", function () {
        document.querySelector(".filter-menu").classList.toggle("active");
    });
</script>

<script src="http://vits.natapp1.cc/static/js/checkUser.js"></script>
<!-- 初始化 start -->
<script type="text/javascript">


    $(document).ready(function () {
        layer.ready(function () {
            loadix = layer.load(1, {
                shade: [0.4, '#fff']
            });
        });
        if (!checkUser()) {
            layer.alert(loginErrorMsg);
            layer.close(loadix);
            return;
        }

        getSongList("");

    });

    function getSongList(ci) {
        var songs = [

        ];
        //c=converts.follows.spotlights.featured_artists&m=2&q=yu
        var search = $("#search").val();
        var c = $("#cg").val();
        var m = $("#md").val();
        var filters;
        if("-1" === ci){
            filters = 'm='+m+'&c='+c+"&q="+search;
        } else {
            filters = 'm='+m+'&c='+c+"&q="+search+"&cursor_string="+ci;
        }
        console.log("搜索参数：" + filters);
        // 确保有登录成功后继续执行请求
        $.get('/search/osumap?' + filters, function (resp) {
            if (null != resp) {
                var obj = JSON.parse(resp);
                var nci = obj.cursor_string;
                $("#nci").val(nci);
                $("#pci").val(ci);

                var list = obj.beatmapsets;
                var osulist = $("#osumapList");
                osulist.html("");
                var osuBox = $("#osu-box");
                osuBox.attr("style","height: 1400px; overflow: hidden; display: block; top: -920px;");
                for (let i = 0; i < list.length; i++) {
                    var songMap = list[i];

                    var songObj = {};
                    songObj.title = songMap.title;
                    songObj.artist = songMap.artist;
                    songObj.mp3 = songMap.preview_url;
                    songObj.poster = songMap.covers.cover;
                    songs.push(songObj);


                    osulist.append("<div class=\"products-row\">\n" +
                        "                <button onclick=\"downSong(this)\" data-id=\""+songMap.id+"\" class=\"cell-more-button\">\n" +
                        "                    ↓\n" +
                        "                </button>\n" +
                        "                <div class=\"product-cell image\">\n" +
                        "                    <img src=\"" + songMap.covers.cover + "\" alt=\"product\">\n" +
                        "                    <span>" + songMap.title + "<br>by " + songMap.artist + "</span>\n" +
                        "                </div>\n" +
                        "                <div class=\"product-cell category\"><span class=\"cell-label\">作谱师:</span>" + songMap.creator + "</div>\n" +
                        "                <div class=\"product-cell status-cell\">\n" +
                        "                    <span class=\"cell-label\">游戏状态:</span>\n" +
                        "                    <span class=\"status active\">" + songMap.status + "</span>\n" +
                        "                </div>\n" +
                        "                <div class=\"product-cell sales\"><span class=\"cell-label\">游戏模式:</span>" + songMap.beatmaps[0].mode + "</div>\n" +
                        "                <div class=\"product-cell sales\"><span class=\"cell-label\">节拍数:</span>" + songMap.bpm + " bpm</div>\n" +
                        "                <div class=\"product-cell stock\"><span class=\"cell-label\">点击数:</span>" + songMap.play_count + "</div>\n" +
                        "                <div class=\"product-cell price\"><span class=\"cell-label\">收藏数:</span>" + songMap.favourite_count + "</div>\n" +
                        "            </div>");

                }

                if("" === ci){
                    myPlaylist = new jPlayerPlaylist({
                            jPlayer: "#jquery_jplayer_N",
                            cssSelectorAncestor: "#jp_container_N"
                        },
                        songs,
                        {
                            playlistOptions: {enableRemoveControls: true},
                            swfPath: "js/",
                            supplied: "webmv, ogv, m4v, oga, mp3",
                            useStateClassSkin: true,
                            autoBlur: false,
                            smoothPlayBar: true,
                            keyEnabled: true,
                            audioFullScreen: true
                        });
                } else {
                    layer.alert("已成功加载新歌曲");
                    myPlaylist = new jPlayerPlaylist({
                            jPlayer: "#jquery_jplayer_N",
                            cssSelectorAncestor: "#jp_container_N"
                        },
                        songs,
                        {
                            playlistOptions: {enableRemoveControls: true},
                            swfPath: "js/",
                            supplied: "webmv, ogv, m4v, oga, mp3",
                            useStateClassSkin: true,
                            autoBlur: false,
                            smoothPlayBar: true,
                            keyEnabled: true,
                            audioFullScreen: true
                        });
                    myPlaylist._init();
                }


            }
        });
    }

    function downSong(obj) {
        console.log(obj);
        var song = $(obj);
        console.log(song.attr("data-id"));
        var songUrl = 'https://dl.sayobot.cn/beatmaps/download/mini/' + song.attr("data-id");
        window.open(songUrl,"_blank");

    }

    function sx() {
        $("#sx").click();
    }

    function nSong() {
        var ci = $("#nci").val();
        getSongList(ci);
    }

    function pSong() {
        //getSongList("");
        // 重新刷新页面
        window.location.reload();
    }

    function appSearch() {
        getSongList("-1");
        $("#sx").click();
    }

</script>


</body>
</html>
